<template>
  <div class="subEdit">
    <h2 class="header">{{id ? '编辑' : '新建'}}科目</h2>
    <el-form label-width="120px" @submit.native.prevent="save">
      <el-form-item label="所属分类">
         <el-select multiple v-model="model.categories" placeholder="请选择">
    <el-option
      v-for="item in categories"
      :key="item._id"
      :label="item.name"
      :value="item._id">
    </el-option>
  </el-select>
      </el-form-item>
      <el-form-item label="考试标题">
        <el-input required="required" v-model="model.title" placeholder="请输入考试标题"></el-input>
      </el-form-item>
      <el-form-item label="出题人">
        <el-input required="required" v-model="model.name" placeholder="请输入出题人"></el-input>
      </el-form-item>
      <el-form-item label="活动日期" >
        <div class="date">
        <el-input type="datetime-local" required="required" v-model="model.dataStart" placeholder="请输入起始时间"></el-input>
        <div>——</div>
        <el-input  type="datetime-local" required="required" v-model="model.dataEnd" placeholder="请输入截至时间"></el-input>
        </div>
      </el-form-item>
      <el-form-item label="考试时间">
        <div class="duration">
          <el-input required="required" v-model="model.duration" placeholder="请输入考试时间"></el-input>
          <button>分钟</button>
        </div>
      </el-form-item>
       <el-form-item label="考试说明">
        <vue-editor  v-model="model.instructions" useCustomImageHandler @image-added="handleImageAdded" />
      </el-form-item>
       <el-form-item label="图标展示">
        <el-upload
  class="avatar-uploader"
  :action="$http.defaults.baseURL + '/upload'"
  :show-file-list="false"
  :headers="getAuthHeader()"
  :on-success="afterUploads"
  >
  <img v-if="model.icon" :src="model.icon" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
      </el-form-item>
      <el-form-item label="顶部轮播图设置">
        <el-upload
  class="avatar-uploader"
  :action="$http.defaults.baseURL + '/upload'"
  :show-file-list="false"
  :headers="getAuthHeader()"
  :on-success="afterUpload"
  >
  <img v-if="model.pic" :src="model.pic" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
      </el-form-item>
      <el-form-item >
       <el-button type="primary" native-type="submit" style="float: right">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props:{
   id: {
     type: String
   }
  },
  data() {
    return {
      model: {
      
      },
      categories: {},
    }
  },
methods: {
   afterUpload(res) {
  this.$set(this.model, 'pic', res.url)
  },
  afterUploads(res) {
  this.$set(this.model, 'icon', res.url)
  },
  async save() {
    let res 
    if (this.id) {
   res = await this.$http.put(`/rest/subjects/${this.id}`, this.model)
    } else {
    res = await this.$http.post('/rest/subjects', this.model)

    }
    this.$router.push('/subjects/list')
    this.$message({
      type: 'success',
      message: '保存成功'
    })
  },
  async fetchParent() {
  const res = await this.$http.get('/genre/subject')
  this.categories = res.data
  },
  async fetchData() {
const res = await this.$http.get(`/rest/subjects/${this.id}`)
this.model = res.data
  }
},
created() {
  this.fetchParent()
  this.id && this.fetchData()
}
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 400px;
    height: 180px;
    line-height: 180px;
    text-align: center;
  }
  .avatar {
    width: 400px;
    height: 180px;
    display: block;
  }
.header {
  text-align: center;
}
.date {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.duration .el-input {
  position: relative;
width: 260px;
}
.duration button {
  position: absolute;
  top: 2px;
  left: 160px;
  width: 100px;
  height: 38px;
  outline: none;
  border: 0;
  border-radius: 2px;
  background-color: #F5F7FA;
}

</style>